import React from "react";
import styles from "./ModelInfo.module.css";
import { useModelInfo } from "../../store/useModelInfo";
import { isEmpty } from "lodash";

export const ModelInfo: React.FC = () => {
    const modelInfo = useModelInfo((state) => state.modelInfo);
    if (isEmpty(modelInfo)) {
        return null;
    }
    return (
        <div className={styles.container}>
            {/* 基本信息部分 */}
            <div className={styles.section}>
                <div className={styles.infoGrid}>
                    <div className={styles.infoItem}>
                        <div className={styles.infoLabel}>模型名称</div>
                        <div className={styles.infoValue}>{modelInfo.name}</div>
                    </div>
                    <div className={styles.infoItem}>
                        <div className={styles.infoLabel}>格式</div>
                        <div className={styles.infoValue}>
                            {modelInfo.details.format}
                        </div>
                    </div>
                </div>
            </div>

            {/* 模型能力部分 */}
            {modelInfo.capabilities && modelInfo.capabilities.length > 0 && (
                <div className={styles.section}>
                    <div className={styles.sectionTitle}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                        </svg>
                        模型能力
                    </div>
                    <div className={styles.tagList}>
                        {modelInfo.capabilities.map((capability, index) => (
                            <span key={index} className={styles.tag}>
                                {capability}
                            </span>
                        ))}
                    </div>
                </div>
            )}

            {/* 模型详情 */}
            <div className={styles.section}>
                <div className={styles.sectionTitle}>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="16" x2="12" y2="12" />
                        <line x1="12" y1="8" x2="12.01" y2="8" />
                    </svg>
                    模型详情
                </div>

                {/* 基本信息组 */}
                <div className={styles.detailsGroup}>
                    <h4 className={styles.detailsGroupTitle}>基本信息</h4>
                    <div className={styles.detailsGrid}>
                        {modelInfo.details.format && (
                            <div className={styles.detailItem}>
                                <span className={styles.detailLabel}>
                                    格式:
                                </span>
                                <span>{modelInfo.details.format}</span>
                            </div>
                        )}
                        {modelInfo.details.families &&
                            modelInfo.details.families.length > 0 && (
                                <div className={styles.detailItem}>
                                    <span className={styles.detailLabel}>
                                        系列:
                                    </span>
                                    <div className={styles.tagList}>
                                        {modelInfo.details.families.map(
                                            (family, index) => (
                                                <span
                                                    key={index}
                                                    className={styles.tag}
                                                >
                                                    {family}
                                                </span>
                                            ),
                                        )}
                                    </div>
                                </div>
                            )}
                        {modelInfo.details.parent_model && (
                            <div className={styles.detailItem}>
                                <span className={styles.detailLabel}>
                                    父模型:
                                </span>
                                <span>{modelInfo.details.parent_model}</span>
                            </div>
                        )}
                    </div>
                </div>

                {/* 技术规格组 */}
                <div className={styles.detailsGroup}>
                    <h4 className={styles.detailsGroupTitle}>技术规格</h4>
                    <div className={styles.detailsGrid}>
                        {modelInfo.details.parameter_size && (
                            <div className={styles.detailItem}>
                                <span className={styles.detailLabel}>
                                    参数大小:
                                </span>
                                <span>{modelInfo.details.parameter_size}</span>
                            </div>
                        )}
                        {modelInfo.details.quantization_level && (
                            <div className={styles.detailItem}>
                                <span className={styles.detailLabel}>
                                    量化级别:
                                </span>
                                <span>
                                    {modelInfo.details.quantization_level}
                                </span>
                            </div>
                        )}
                    </div>
                </div>

                {/* 高级信息组 */}
                {modelInfo.model_info && (
                    <div className={styles.detailsGroup}>
                        <h4 className={styles.detailsGroupTitle}>高级信息</h4>
                        <div className={styles.detailsGrid}>
                            {modelInfo.model_info && (
                                <div className={styles.detailItem}>
                                    <span className={styles.detailLabel}>
                                        模型信息:
                                    </span>
                                    <pre className={styles.codeBlock}>
                                        {JSON.stringify(
                                            modelInfo.model_info,
                                            null,
                                            2,
                                        )}
                                    </pre>
                                </div>
                            )}
                        </div>
                    </div>
                )}
            </div>

            {/* 描述部分 */}
            {modelInfo.description && (
                <div className={styles.section}>
                    <div className={styles.sectionTitle}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                            <polyline points="14 2 14 8 20 8" />
                            <line x1="16" y1="13" x2="8" y2="13" />
                            <line x1="16" y1="17" x2="8" y2="17" />
                            <polyline points="10 9 9 9 8 9" />
                        </svg>
                        描述
                    </div>
                    <div className={styles.description}>
                        {modelInfo.description}
                    </div>
                </div>
            )}

            {/* 模型系列部分 */}
            {modelInfo.details.families &&
                modelInfo.details.families.length > 0 && (
                    <div className={styles.section}>
                        <div className={styles.sectionTitle}>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="16"
                                height="16"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                            >
                                <path d="M3 6h18" />
                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                            </svg>
                            模型系列
                        </div>
                        <div className={styles.tagList}>
                            {modelInfo.details.families.map((family, index) => (
                                <span key={index} className={styles.tag}>
                                    {family}
                                </span>
                            ))}
                        </div>
                    </div>
                )}

            {/* 参数配置部分 */}
            {!isEmpty(modelInfo.parameters) && (
                <div className={styles.section}>
                    <div className={styles.sectionTitle}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="M12 20h9" />
                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
                        </svg>
                        参数配置
                    </div>
                    <div className={styles.parameterGrid}>
                        <pre className={styles.template}>
                            {modelInfo.parameters}
                        </pre>
                    </div>
                </div>
            )}

            {/* 模板部分 */}
            {modelInfo.template && (
                <div className={styles.section}>
                    <div className={styles.sectionTitle}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                        </svg>
                        对话模板
                    </div>
                    <pre className={styles.template}>{modelInfo.template}</pre>
                </div>
            )}
        </div>
    );
};
